<template>
	<view class="shi-container">
		<view class="shi-header">
			<!--文字 -->
			<view class="shi-header-txt">
				<view class="bai">我拥有的金豆数量：</view>
				<view class="yellow" style="margin-bottom: 40rpx">{{ number }}份</view>
				<view class="bai">哈希值：</view>
				<view class="yellow">{{ hashValue }}</view>
			</view>
		</view>
		<view class="shi-body">
			<view class="shi-body-price">
				<view class="price-box">
					<view class="box1">设置价格</view>
					<view class="box2">（市场金豆实时价：{{ lowPrice }}）</view>
				</view>
				<view class="">
					<u--input color="#fff" type="digit" prefixIconStyle="font-size:30rpx;color: #fff"
						prefixIcon="rmb" placeholder="请输入价格" border="bottom" placeholderStyle="fontSize:25rpx;color:#fff" clearable
						v-model="myprice"></u--input>
				</view>
				<view class="sale-num">售卖数量</view>
				<view class="number-box">
					<!-- <u-number-box min="10" v-model="value" button-size="30" :disabledInput="true" @change="valChange"></u-number-box> -->
					<u-number-box v-model="value" min="10" :disabledInput="true" @change="valChange">
						<view slot="minus" class="minus">
							<u-icon name="minus" color="#FFFFFF" bold  size="12"></u-icon>
						</view>
						<text slot="input"  class="input">{{value}}</text>
						<view slot="plus" class="plus">
							<u-icon name="plus" bold color="#FFFFFF" size="12"></u-icon>
						</view>
					</u-number-box>
				</view>
				<view class="box_popo">
					<view class="number-txt" @click="totalPrice(50)">50</view>
					<view class="number-txt" @click="totalPrice(100)">100</view>
					<view class="number-txt" @click="totalPrice(300)">300</view>
					<view class="number-txt" @click="totalPrice('全部')">全部</view>
				</view>
				<view class="foot-price">
					<view class="total-price">总售价 ：</view>
					<view class="totalprice">￥{{ (myprice * value).toFixed(2) }}</view>
				</view>
				<view class="foot-price">
					<view class="total-price">服务费（{{ cost }}%）：</view>
					<view class="totalprice">￥{{ (myprice * value * cost * 0.01).toFixed(2) }}</view>
				</view>
				<view class="foot-price">
					<view class="total-price">预计收入 ：</view>
					<view class="totalprice">￥{{ (myprice * value * (1 - cost * 0.01)).toFixed(2) }}</view>
				</view>
			</view>
		</view>
		<view class="xieyi">
			<u--image width="30rpx" height="30rpx" style="margin-right: 15rpx" v-show="!checked" @click="onchecked"
				:src="imgUrl + '/static/newImage/nochecked.png'" alt=""></u--image>
			<u--image width="30rpx" height="30rpx" style="margin-right: 15rpx" v-show="checked" @click="onchecked"
				:src="imgUrl + '/static/newImage/checked.png'" alt=""></u--image>
			<view class="txt">
				<text>我已阅读并同意</text>
				<text @click="gonotice" style="color: #3b82c4">《Go Go Duck转卖须知》</text>
			</view>
		</view>
		<view class="notice">
			<view class="" style="margin-bottom: 17rpx;font-size: 28rpx; ">GoGoDuck寄售须知：</view>
			<view class="" style="margin-bottom: 8rpx">一、寄售收入在扣除综合服务费 ({{ cost }}%)后，自动转入钱包余额。</view>
			<view style="margin-bottom: 8rpx">二、寄售收入的增值部分，请您主动申报个人所得税。</view>
			<view class="">三、注意:同一账号短时间内累计取消3次订单，将会被限购一段时间。</view>
		</view>
		<view class="snapped_up">
			<view @click="gomessage" class="Cancel_button">藏馆</view>
			<view @click="confirmSale" class="purchase_button">立即寄售</view>
		</view>
		<u-popup zIndex="200000" mode="center"
			customStyle="width:650rpx;height:300rpx;border-radius:14rpx;margin-bottom:200rpx" :closeable="true"
			:show="show" @close="close">
			<view class=""
				style="font-size: 30rpx; font-weight: 800; text-align: center; position: absolute; top: 30rpx; left: 35%">
				请输安全密码</view>
			<view class="dialog-box">
				<u-code-input v-model="safepassword" mode="box" dot></u-code-input>
			</view>
			<view class="clpmklj">
				<view class="box1" @click="close">取消</view>
				<view class="box2" @click="throttleConfirm">确认</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import config from '@/config';
	import {
		getUserAdmin
	} from '@/utils/auth.js';
	import {
		getPropRealTime,
		getpropConsignment
	} from '@/api/consignment/consignment.js';
	import {
		getMyBackpack
	} from '@/api/collect/collect.js';
	export default {
		data() {
			return {
				number: 0,
				hashValue: 0,
				loading: false,
				imgUrl: config.gillUrl,
				value: 10,
				checked: false,
				myprice: null,
				cost: uni.getStorageSync('COST'),
				show: false,
				safepassword: '',
				lowPrice: 0,
				id: 0,
				bagList: [],
				hashValue: '',
				propId: '',
				showKeyboard: false, // 控制自定义键盘的显示
				admin: getUserAdmin(),
				throttling: false // 初始时不处于节流状态
			};
		},
		onLoad(option) {
			this.propId = option.propId;
			this.id = option.id;
		},
		onShow() {
			this.getbagList();
			(this.myprice = ''), (this.checked = false);
		},
		created() {
			// console.log(this.admin, "ppp")
			this.getlowprice();
		},

		methods: {
			gonotice() {
				uni.navigateTo({
					url: '/pages/consignment/notice'
				});
			},
			gomessage() {
				uni.navigateTo({
					url: '/pages/work/message' // 藏馆
				});
			},
			onchecked() {
				if (this.checked == false) {
					this.checked = true;
				} else if (this.checked == true) {
					this.checked = false;
				}
			},
			async getbagList() {
				const data = await getMyBackpack();
				this.bagList = data.data;
				this.number = data.data[0].number;
				this.propId = data.data[0].propId;
				this.hashValue = data.data[0].hashValue;
				this.id = data.data[0].id;
				this.propImg = data.data[0].propImg;
				this.propName = data.data[0].propName;
			},
			async getlowprice() {
				const data = await getPropRealTime();
				this.lowPrice = data.data.unitPrice;
			},
			throttleConfirm() {
				if (!this.throttling) {
					// 如果没有处于节流状态，执行你的按钮点击逻辑
					this.confirmOnsale();
					// 设置节流状态为 true，并在一定时间后恢复为 false
					this.throttling = true;
					setTimeout(() => {
						this.throttling = false;
					}, 2000); // 1000毫秒（1秒）是节流的时间间隔，你可以根据需要调整
				}
			},
			confirmOnsale() {
				this.show = false;
				this.loading = true;
				if (this.safepassword == '') {
					this.$modal.showToast('请输入您的安全密码！');
					this.show = true;
				} else {
					this.gosuccess();
				}
			},
			async gosuccess() {
				let obj = {};
				obj.memberPropId = this.id;
				obj.propId = this.propId;
				obj.memberPropNum = this.value;
				obj.unitPrice = this.myprice;
				obj.securityPassword = this.safepassword;
				const data = await getpropConsignment(obj);
				if (data.code == 200) {
					this.$modal.showToast('寄售成功！');
					this.show = false;
					uni.navigateTo({
						url: `/pages/consignment/toolSucessConsige?propImg=${this.propImg}&id=${this.id}&propName=${this.propName}&unitPrice=${
						this.myprice * this.value * (1 - this.cost * 0.01)
					}&number=${this.value}`
					});
				} else {
					this.show = false;
					this.safepassword = '';
					this.$modal.showToast(data.msg);
				}
			},
			confirmSale() {
				if (this.myprice == '') {
					this.$modal.showToast('您还没有输入价格！');
				} else if (this.checked == false) {
					this.$modal.showToast('您还没有阅读转卖须知！');
				} else {
					this.show = true;
				}
			},
			open() {},
			close() {
				this.show = false;
			},
			totalPrice(val) {
				if (val == '全部') {
					this.value = this.bagList[0].number; //全部
				} else {
					this.value += val;
				}
			},
			valChange(e) {
				// console.log('当前值为: ' + e.value);
			},
			keyBoardChange(val) {
				if (val != '.') {
					this.safepassword += val;
				}
			},
			backspace() {
				if (this.safepassword.length) this.safepassword = this.safepassword.substr(0, this.safepassword.length -
				1);
			}
		}
	};
</script>

<style lang="scss" scoped>
	::v-deep .u-input--no-radius {
		padding: 0 !important;
	}
  ::v-deep .u-border-bottom{
	  border-bottom: 1rpx solid rgba(255,255,255,0.1) !important;
  }
	/* 假设 .u-number-box 是组件的主要容器类名 */
	.u-number-box:focus {
		/* 在这里定义点击时的颜色变化 */
		/* 例如修改背景颜色和边框颜色 */
		background-color: #ffcc00;
		border-color: #ffa500;
	}
    .minus{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 52rpx;
		height: 52rpx;
		background: #15142D;
		border-radius: 14rpx;
		position: absolute;
		top: 0;
		left:0rpx;
		border: 2rpx solid #8A92A3;
	}
	.plus{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 52rpx;
		height: 52rpx;
		background: #15142D;
		line-height: 52rpx;
		border-radius: 14rpx;
		position: absolute;
		right: 0;
		top: 0;
		border: 2rpx solid #8A92A3;
	}
	.input{
		width:100px;
		text-align:center; 
		height: 52rpx;
		color: #7d8597;
		line-height: 52rpx;
		border-radius: 14rpx;
		background-color: #343d58;
	}
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.clpmklj {
		display: flex;
		margin: 30rpx 120rpx;

		.box2 {
			width: 180rpx;
			height: 78rpx;
			text-align: center;
			line-height: 80rpx;
			background: linear-gradient(90deg, #3adfeb 0%, #4463ff 100%);
			border-radius: 16rpx;
			opacity: 1;
			font-size: 31rpx;
			font-family: 'font';
			font-weight: 400;
			color: #ffffff;
		}

		.box1 {
			width: 180rpx;
			height: 78rpx;
			text-align: center;
			background: gray;
			margin-right: 60rpx;
			border-radius: 16rpx;
			opacity: 1;
			font-size: 31rpx;
			line-height: 80rpx;
			font-family: 'font';
			font-weight: 400;
			color: #ffffff;
		}
	}

	::v-deep .u-fade-enter-active,
	.u-fade-leave-active {
		z-index: 0 !important;
	}

	.shi-container {
		.shi-header {
			margin: 0 34rpx;
			background-image: url('../../static/images/shibi.png');
			background-size: cover;
			padding: 35rpx;
			box-sizing: border-box;
			width: 680rpx;
			height: 277rpx;
			border-radius: 14rpx;
			display: flex;
			justify-content: space-between;

			.bai {
				font-size: 24rpx;
				font-family: 'font';
				font-weight: 400;
				color: #ffffff;
				margin-bottom: 12rpx;
			}

			.yellow {
				font-size: 28rpx;
				font-family: 'font';
				font-weight: 400;
				color: #fff;
				width: 600rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		.shi-body {
			background-color: #15142d;
			width: 680rpx;
			height: 620rpx;
			margin: 34rpx 34rpx;
			// background: #15142d;
			border-radius: 14rpx;
			box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
			opacity: 1;

			.shi-body-price {
				padding: 17rpx 34rpx;

				.price-box {
					display: flex;
					margin-bottom: 30rpx;

					.box1 {
						height: 38rpx;
						font-size: 28rpx;
						font-family: 'font';
						font-weight: 400;
						color: #ffffff;
					}

					.box2 {
						font-size: 20rpx;
						font-family: 'font';
						font-weight: 400;
						color: #8a92a3;
						margin-top: 8rpx;
					}
				}

				.sale-num {
					margin-top: 40rpx;
					font-size: 28rpx;
					font-family: 'font';
					font-weight: 400;
					color: #ffffff;
				}

				.foot-price {
					display: flex;
					justify-content: space-between;
					margin-bottom: 35rpx;

					.total-price {
						font-size: 28rpx;
						font-family: 'font';
						font-weight: 400;
						color: #8a92a3;
					}

					.totalprice {
						font-size: 28rpx;
						font-family: 'font';
						font-weight: 400;
						color: #ffffff;
					}
				}

				.number-box {
					width:100px;
					position: relative;
					margin: 34rpx 0 35rpx 0rpx;
				}

				.box_popo {
					width: 630rpx;
					display: flex;
					margin: 0 0 25rpx 0;
					justify-content: space-between;

					.number-txt {
						border: 1rpx solid #333;
						width: 91rpx;
						height: 52rpx;
						background: #1B2740;
						text-align: center;
						border-radius: 14rpx;
						box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
						opacity: 1;
						font-size: 28rpx;
						font-family: 'font';
						font-weight: 400;
						color: #ffffff;
						line-height: 51rpx;
					}

					.number-txt:hover {
						background-color: #46a6f8;
					}
				}
			}
		}
	}

	.xieyi {
		width: 680rpx;
		height: 30rpx;
		text-align: center;
		padding-left: 25%;
		font-size: 21rpx;
		font-family: 'font';
		font-weight: 400;
		color: #787f8e;
		line-height: 30rpx;
		margin-bottom: 58rpx;
		margin-top: 70rpx;
		display: flex;

		img {
			margin-right: 15rpx;
			margin-top: 3rpx;
		}

		.txt {
			font-size: 21rpx;
			font-family: 'font';
			font-weight: 400;
			color: #787f8e;
		}
	}

	.group {
		width: 26rpx;
		height: 26rpx;
		border-radius: 3rpx 3rpx 3rpx 3rpx;
	}

	.notice {
		margin: 0 34rpx;
		font-size: 24rpx;
		font-family: 'font';
		font-weight: 400;
		color: #8a92a3;
	}

	// 底部购买
	.snapped_up {
		width: 100%;
		position: absolute;
		bottom: 0;
		display: flex;
		justify-content: space-between;
		height: 155rpx;
		padding: 26.46rpx 34.88rpx;
		font-size: 28rpx;
		font-family: 'font';
		font-weight: 700;
		color: #ffffff;

		.Cancel_button {
			width: 209rpx;
			height: 77rpx;
			background: #211f30;
			border-radius: 14rpx;
			border: 2rpx solid #3c424d;
			text-align: center;
			line-height: 77rpx;
		}

		.purchase_button {
			width: 436rpx;
			height: 77rpx;
			background: #46a6f8;
			box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
			border-radius: 14rpx;
			line-height: 80rpx;
			text-align: center;
		}
	}

	.dialog-box {
		margin-top: 100rpx;
		width: 560rpx;
		margin-left: 10%;
		z-index: 200000;
	}
</style>